<template>
  <div>
    <el-row :gutter="20" class="hmBox">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" class="hmItem">
        <el-card shadow="always" class="homeBox homeBox1">
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="6"><div class="hmIco"><img src='static/images/hmBox1Ico1.png' /></div></el-col>
            <el-col :span="18">
              <div>
                <h3 class="hmTit1">总收入</h3>
                <p class="hmNum"><span>739.00</span>¥</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" class="hmItem">
        <el-card shadow="always" class="homeBox homeBox2">
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="6"><div class="hmIco"><img src='static/images/hmBox1Ico2.png' /></div></el-col>
            <el-col :span="18">
              <div>
                <h3 class="hmTit1">当月收入</h3>
                <p class="hmNum"><span>739.00</span>¥</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" class="hmItem">
        <el-card shadow="always" class="homeBox homeBox3">
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="6"><div class="hmIco"><img src='static/images/hmBox1Ico3.png' /></div></el-col>
            <el-col :span="18">
              <div>
                <h3 class="hmTit1">客户端数量</h3>
                <p class="hmNum"><span>60</span>个</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" class="hmItem">
        <el-card shadow="always" class="homeBox homeBox4">
          <el-row type="flex" justify="center" align="middle">
            <el-col :span="24">
              <div>
                <h3 class="hmTit1"><img src='static/images/hmLastIco.png' />标准版本</h3>
                <h3 class="hmTit1"><img src='static/images/hmLastIco.png' />高级版本</h3>
                <h3 class="hmTit1"><img src='static/images/hmLastIco.png' />定制版本</h3>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="hmBot">
      <el-col :xs="24" :sm="24" :md="24" :lg="6" class="hmLef">
        <div class="hmBotBg">
          <h3 class="hmName">过去30天开机率</h3>
          <div class="cirPercentage">
            <el-progress type="circle" :percentage="80" :width="220" color="#30a7f4" :stroke-width="10"></el-progress>
            <span></span>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="18" class="hmRig">
        <div class="hmBotBg">
          <el-row type="flex" justify="center" class="hmRigCon">
              <el-col :xs="24" :sm="12" :md="8" class="hmRigItem">
                <div class="hmBotCir flexCon">
                  <span><img src="static/images/hmBotImg1.png" /></span>
                </div>
                <h3 class="hmName">过去30天开机时长／小时</h3>
                <div class="hmBotNum"><span>1298</span>次</div>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" class="hmRigItem">
                <div class="hmBotCir flexCon">
                  <span><img src="static/images/hmBotImg2.png" /></span>
                </div>
                <h3 class="hmName">过去30天页面浏览量／次</h3>
                <div class="hmBotNum"><span>7890</span>次</div>
              </el-col>
              <el-col :xs="24" :sm="12" :md="8" class="hmRigItem">
                <div class="hmBotCir flexCon">
                  <span><img src="static/images/hmBotImg3.png" /></span>
                </div>
                <h3 class="hmName">过去30天视频浏览量／次</h3>
                <div class="hmBotNum"><span>4568</span>次</div>
              </el-col>
            </el-row>
          </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { homeInfo } from "@/api/home"
export default {
  name: "home",
  data() {
    return {
      message: ""
    }
  },
  created() {
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.flexCon{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-pack:center; -webkit-flex-flow:column wrap; -ms-flex-flow:column wrap; flex-flow:column wrap; align-items:center;}
.hmBox{ padding-top: 50px;}
.hmItem{ position: relative; margin-bottom: 35px;padding-left: 17px !important;padding-right: 17px !important;}
.homeBox{ width:100%; height: 215px; position: relative; background-position: center center; background-repeat: no-repeat; background-size: cover; color: #ffffff;  padding: 10px; border-radius: 10px; display: flex; align-items: center;}
.homeBox1{ background-image: url('/static/images/hmBox1Bg1.jpg');}
.homeBox2{ background-image: url('/static/images/hmBox1Bg2.jpg');}
.homeBox3{ background-image: url('/static/images/hmBox1Bg3.jpg');}
.homeBox4{ background-image: url('/static/images/hmBox1Bg4.jpg'); justify-content: center;}
.homeBox .el-card__body{ width: 100%;}
.homeBox4 .el-card__body{ width: auto;}
.homeBox4 h3{ margin: 20px 0;}
.homeBox4 img{ vertical-align: middle; margin-right: 15px;}
.hmIco{ padding-right: 10px; padding-top: 5px;}
.hmIco img{ max-width: 100%;}
.hmTit1{ font-size: 22px; margin: 5px auto; font-weight: normal;}
.hmNum{ font-size: 22px; margin: 5px auto;}
.hmNum span{ margin-right: 5px; font-size: 37px;}
.hmBot{ margin-bottom: 20px; display: flex;}
.hmLef,.hmRig{ padding: 0 17px !important;}
.hmBotBg{ height: 100%; background: #ffffff; box-shadow: 0 0 24px rgba($color: #000000, $alpha: 0.1); padding: 50px 5%; border-radius: 15px;}
.hmName{ font-size: 22px; color: #333333; font-weight: normal; margin: 15px 0; text-align: center;}
.cirPercentage{ margin: 0 auto; display: block; width: 80%; position: relative;}
.cirPercentage span{ position:absolute; width: 74%; height: 74%; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid #f0f0f0;}
.cirPercentage .el-progress{ margin: 0 auto; display: block; width: 100%;}
.cirPercentage .el-progress-circle{ margin: 0 auto; border-radius: 50%; padding: 10px; border: 1px solid #f0f0f0; width: auto !important; height: auto !important;}
.cirPercentage .el-progress__text{ font-size: 40px !important; color: #333333;}
.hmBotCir{ width: 153px; height: 153px; border-radius: 50%; background: rgba($color: #2d96ee, $alpha: 0.1); margin: 15px auto 30px;}
.hmBotCir span{ display: block; width: 100%;}
.hmBotCir span img{ max-width: 44%; margin: 0 auto; display: block;}
.hmBotNum{ color: #2f98ef; font-size: 20px; text-align: center;}
.hmBotNum span{ font-size: 37px; padding-right: 8px;}

@media screen and (min-width: 991px) {

}
@media screen and (max-width: 1600px) {
  .hmBox{ padding-top: 30px;}
  .hmItem{ margin-bottom: 25px;}
  .homeBox{ height: 160px;}
  .hmTit1{ font-size: 16px;}
  .homeBox4 h3{ margin: 12px 0;}
  .hmNum{ font-size: 16px;}
  .hmNum span{ font-size: 24px;}
  .hmName{ font-size: 18px;}
  .hmBotBg{ padding: 30px 5%;}
  .hmBotCir{ width: 130px; height: 130px;}
  .hmBotNum{ font-size: 18px;}
  .hmBotNum span{ font-size: 32px;}
  .cirPercentage .el-progress-circle{ padding: 7px;}
  .cirPercentage .el-progress__text{ font-size: 34px !important}
}
@media screen and (max-width: 1400px) {
  .homeBox{ height: 130px;}
  .homeBox4 h3{ margin: 10px 0;}
  .homeBox4 img{ max-width: 22px; margin-right: 8px;}
  .hmTit1{ font-size: 16px;}
  .hmNum{ font-size: 16px;}
  .hmNum span{ font-size: 24px;}
  .hmName{ font-size: 16px;}
  .hmBotNum{ font-size: 16px;}
  .hmBotNum span{ font-size: 26px;}
  .cirPercentage span{ width: 70%; height: 70%;}
  .cirPercentage .el-progress__text{ font-size: 30px !important}
}
@media screen and (max-width: 1199px) {
  .hmBot{ display: block;}
  .hmLef{ margin-bottom: 20px;}
  .cirPercentage{ max-width: 200px;}
}
@media screen and (max-width: 768px) {
  .breadcrumbLocation[data-v-6beed8bc]{ padding: 10px 15px;}
  .hmBox{ padding-top: 20px;}
  .hmItem{ margin-bottom: 15px;}
  .homeBox{ padding: 0; height: auto;}
  .hmRigCon{ display: block; overflow: hidden;}
  .hmRigItem{ margin-bottom: 15px;}
  .hmBotCir{ margin: 10px auto; width: 120px; height: 120px;}
}
@media screen and (max-width: 460px) {
  .cirPercentage{ max-width: 170px;}
  .hmBotNum span{ font-size: 22px;}
}
</style>
